#chat {
  display: flex;
  flex-direction: column;
  width: 800px;
  flex-grow: 1;
}
#chat-main {
  display: block;
  text-align:right;
}
/*
#contacts {
  overflow-y: scroll;
  border: 1px solid #ccc;
  padding: 10px;
  background-color: lightyellow;
  float: left;
  flex-grow: 1;
  width: 280px;
}
*/
#chat-box {
  overflow-y: scroll;
  border: 1px solid #ccc;
  padding: 10px;
  background-color: lightyellow;
  text-align: center;
}
.contact-container {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;
  background-color: #2196F3;
  height: 100vh;
  max-width: 100%;
  text-align: center;
  font-size: 8vw;
  padding: 20px 0;
}
.center-box {
  overflow-y: scroll;
  /*max-width: 100%;*/
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-column: span 16;
  grid-template-rows: auto 1fr;
}
.L2-center-box {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-column: span 16;
}
.two-row {
  grid-column: span 4;
}
.center-box, .two-row, .border {
  background-color: rgba(255, 255, 255, 0.8);
}
.message-container {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
  height: 100vh;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
.back {
  grid-column: span 2;
}
.more {
  grid-column: 15 / 17;
}
.input {
  grid-column: span 14;
}
.enter {
  grid-column: 15 / 17;
}
.notice {
  grid-column: span 12;
}
.enter, .input, .more, .back, .notice {
  background-color: rgba(255, 255, 255, 0.8);
}
